<template>
  <view class="container">
    <view class="form-container">
      <view class="form-item">
        <text class="label">邮箱</text>
        <input
          class="input"
          type="text"
          v-model="forgetForm.email"
          placeholder="请输入邮箱"
          @blur="validateEmail"
        />
      </view>

      <view class="form-item">
        <text class="label">验证码</text>
        <view class="code-wrapper">
          <input
            class="input"
            type="number"
            v-model="forgetForm.captcha"
            placeholder="请输入验证码"
			style="border: none;"
          />
          <view
            class="code-btn"
            :class="{ disabled: counting }"
            @tap="getCode"
          >
            {{ counting ? `${countdown}s` : '获取验证码' }}
          </view>
        </view>
      </view>


      <view class="form-item">
        <text class="label">新的登录密码</text>
        <input
          class="input"
          type="password"
          v-model="forgetForm.password"
          placeholder="请设置密码"
        />
      </view>


      <view class="form-item">
        <text class="label">再次输入密码</text>
        <input
          class="input"
          type="password"
          v-model="forgetForm.confirmPassword"
          placeholder="请再次输入密码"
        />
      </view>


      <button class="submit-btn" @click="handleSubmit">确认</button>


      <view class="switch-form" @tap="goLogin">
        想起密码了？<text class="switch-btn">去登录</text>
      </view>
    </view>
  </view>
</template>

<script>
import { emailVerification, updatePassword } from '@/api/forgetPassword.js'
import { sendCode } from '@/api/login.js'

export default {
  data() {
    return {
      counting: false,
      countdown: 60,
      timer: null,
      forgetForm: {
        email: '',
        captcha: '',
        password: '',
        confirmPassword: ''
      }
    }
  },
  methods: {
    // 邮箱校验
    validateEmail() {
      const reg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!this.forgetForm.email) {
        uni.showToast({ title: '请输入邮箱', icon: 'none' })
        return false
      }
      if (!reg.test(this.forgetForm.email)) {
        uni.showToast({ title: '邮箱格式不正确', icon: 'none' })
        return false
      }
      return true
    },

    // 获取验证码
    async getCode() {
      if (!this.validateEmail()) return
      if (this.counting) return

      try {
        uni.showLoading({ title: '发送中...' })
        const res = await sendCode(this.forgetForm.email)
        uni.hideLoading()
        if (res.code === 200) {
          uni.showToast({ title: '验证码已发送', icon: 'success' })
          this.startCountdown()
        } else {
          uni.showToast({ title: res.message || '发送失败', icon: 'none' })
        }
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: '网络异常', icon: 'none' })
      }
    },

    // 倒计时
    startCountdown() {
      this.counting = true
      this.timer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(this.timer)
          this.counting = false
          this.countdown = 60
        }
      }, 1000)
    },

    // 提交
    async handleSubmit() {
      const { email, captcha, password, confirmPassword } = this.forgetForm
      if (!email || !captcha || !password || !confirmPassword) {
        uni.showToast({ title: '请完整填写', icon: 'none' })
        return
      }
      if (password !== confirmPassword) {
        uni.showToast({ title: '两次密码不一致', icon: 'none' })
        return
      }

      uni.showLoading({ title: '提交中...', mask: true })

      try {
        // 1. 验证邮箱+验证码
        const verifyRes = await emailVerification({ email, captcha })
        if (verifyRes.code !== 200) {
          uni.showToast({ title: verifyRes.message || '验证码错误', icon: 'none' })
          return
        }

        // 2. 修改密码
        const updateRes = await updatePassword({ email, password })
        uni.hideLoading()
        if (updateRes.code === 200) {
          uni.showToast({ title: '密码已重置', icon: 'success' })
          // 替换前
          // setTimeout(() => uni.switchTab({ url: '/pages/login/login-index/login-index' }), 1500);
          
          // 替换后
          setTimeout(() => uni.navigateTo({ url: '/pages/login/login-index/login-index' }), 1500);
        } else {
          uni.showToast({ title: updateRes.message || '修改失败', icon: 'none' })
        }
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: '网络异常', icon: 'none' })
      }
    },

    goLogin() {
      uni.navigateTo({ url: '/pages/login/login-index/login-index' })
    }
  },
  onUnload() {
    // 清理倒计时
    this.timer && clearInterval(this.timer)
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 40rpx;
  background-color: #fff;
  min-height: 100vh;
}

.form-container {
  width: 100%;
}

.form-title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 60rpx;
  text-align: center;
}

.form-item {
  margin-bottom: 40rpx;
  
  .label {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .input {
    width: 100%;
    height: 80rpx;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
	  border-bottom: 2rpx solid #ccc;
  }
}


.code-wrapper {
  display: flex;
  align-items: center;
    border-bottom: 2rpx solid #ccc;
}

.code-btn {
  margin-left: 20rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #b6ccd8;
  white-space: nowrap;
  background: transparent;
  border: none;
  border-radius: 0;

}

.code-btn.disabled {
  color: #ccc;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #b6ccd8;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
  margin-top: 60rpx;
}

.switch-form {
  margin-top: 30rpx;
  text-align: center;
  font-size: 28rpx;
  
  .switch-btn {
    color: #b6ccd8;
    margin-left: 10rpx;
  }
}



</style>